<template>
  <div class="main-cont cf">
    <div class="m-top">
      <div class="m-tit">
        <div class="t-name">正在离校</div>
      </div>
      <div class="m-list">
        <MarqueeHtmlDown ref="vMarqueeHtmlDown" paddingBottom="2em" delayTime="40">
          <div class="content">
            <div v-for="grade of leavingClass" :key="grade.id" class="row cf">
              <div class="l">{{grade.name}}：</div>
              <div class="r">
                <span v-for="cla of grade.classes" :key="cla.id" class="classItem">{{cla.name}}</span>
              </div>
            </div>
          </div>
        </MarqueeHtmlDown>
      </div>
    </div>
    <div class="m-bottom">
      <div class="m-tit">
        <div class="t-name">已离校</div>
      </div>
      <div class="m-list">
        <MarqueeHtmlDown ref="vMarqueeHtmlDownGone" paddingBottom="2em" delayTime="40">
          <div class="content">
            <div v-for="grade of goneClass" :key="grade.id" class="row cf">
              <div class="l">{{grade.name}}：</div>
              <div class="r">
                <span v-for="cla of grade.classes" :key="cla.id" class="classItem">{{cla.name}}</span>
              </div>
            </div>
          </div>
        </MarqueeHtmlDown>
      </div>
    </div>
  </div>
</template>

<script>
import MarqueeHtmlDown from '@/modules/marquee-text/MarqueeTextDown'
export default {
  components: {
    MarqueeHtmlDown
  },
  props: {
    stayClass: Array,
    goneClass: Array,
    leavingClass: Array
  },
  watch: {
    stayClass () {
      this.$nextTick(() => { this.$refs.vMarqueeHtmlDown.change() })
    },
    goneClass () {
      this.$nextTick(() => { this.$refs.vMarqueeHtmlDownGone.change() })
    }
  },
  methods: {
    isNeedScroll () {
      this.$nextTick(() => {
        let a = this.$refs.a
        let b = this.$refs.b
        let contHA = a.parentNode.parentNode.clientHeight - 50
        let contHB = b.parentNode.parentNode.clientHeight - 50
        this.needScrollA = a.clientHeight - contHA > 0
        this.needScrollB = b.clientHeight - contHB > 0
        this.needScrollA && this.scroll(a, a.clientHeight)
        this.needScrollB && this.scroll(b, b.clientHeight)
      })
    }
  }
}
</script>

<style scoped>
.main-cont {
  height: 100%;
  border: 1px solid #979797;
}
.m-top {
  width: 70%;
  float: left;
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid #ccc;
  position: relative;
}
.m-bottom {
  width: 30%;
  float: left;
  height: 100%;
  position: relative;
}
.m-tit {
  text-align: center;
  position: relative;
  width: 100%;
  height: 0.5em;
  /* height: 100%; */
  background-color: #5680df;
  color: #fff;
}

.t-name {
  font-size: 0.38em;
}
.m-bottom .m-tit {
  position: relative;
  background-color: #9c9c9e;
}
.m-list {
  position: absolute;
  top: 0.5em;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}
.m-list .content {
  position: relative;
  /* position: absolute; */
  left: 0;
  top: 0;
  width: 100%;
}
.m-list .marquee-down {
  height: 100%;
  padding: 0.08em 0.12em;
  box-sizing: border-box;
}
.row {
  /* display: flex; */
  padding: 0.1em 0 0.02em;
  line-height: 1;
  font-size: 0.4em;
}
.row .l {
  float: left;
  /* width: 1em; */
  /* margin-top: 0.06em; */
  line-height: 1.5;
  color: #292929;
  text-align: center;
  font-weight: bold;
}
.row .r {
  /* margin-top: -0.04em; */
  /* overflow: hidden; */
  /* margin-left: 1em; */
}
.row .r .classItem {
  display: inline-block;
  padding: 0 0.1em 0;
  line-height: 1.5;
  color: #375bad;
  font-weight: bold;
}

.m-bottom .row .r .classItem {
  color: #999;
}
</style>
